<template>
  <div>
    <!-- 文本框 -->
    <el-form-item v-if="type === 'text'" :label="label">
      <el-input v-model="modelValue" :placeholder="option.placeholder" />
    </el-form-item>
    <!-- 数字 -->
    <el-form-item v-if="type === 'number'" :label="label">
      <el-input type="number" v-model="modelValue" :placeholder="option.placeholder" />
    </el-form-item>

    <!-- 下拉框 -->
    <el-form-item v-else-if="type === 'select'" :label="label">
      <el-select v-model="modelValue" :placeholder="option.placeholder">
        <el-option v-for="item in option" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

    <!-- 单图 -->
    <el-form-item v-else-if="type === 'image'" :label="label">
      <image-upload v-model="modelValue" :limit="1" :multiple="false" />
    </el-form-item>
    <!-- 多图 -->
    <el-form-item v-else-if="type === 'images'" :label="label">
      <image-upload v-mode="modelValue" :multiple="true" />
    </el-form-item>
    <!-- 单选框 -->
    <el-form-item v-else-if="type === 'radio'" :label="label">
      <el-radio-group v-model="modelValue">
        <el-radio v-for="item in option" :key="item.value" :label="item.value">
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 多选框 -->
    <el-form-item v-else-if="type === 'checkbox'" :label="option.label">
      <el-checkbox-group v-model="modelValue">
        <el-checkbox v-for="item in option.options" :key="item.value" :label="item.value">
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>

<script setup>
import imageUpload from '@/components/image-upload/index.vue'
import { computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  label: {
    type: String,
    required: true,
  },
  option: {
    type: Object,
    required: true,
  },
  modelValue: {
    type: [String, Number, Array],
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])

// 双向绑定
const modelValue = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})
</script>
